<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>群欢迎语</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="企业素材" name="first">
          <!-- 按钮 -->
          <div>
            <el-button size="small" icon="el-icon-plus" type="primary" @click="handleEdit">新建素材</el-button>
            <el-input size="small" v-model="formInline.name" placeholder="请输入标签组名称" style="width: 300px;"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="团队素材" name="second">

        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-card class="box-card">
      <!--列表-->
      <el-row>
        <el-col span="5">
          <el-link @click="show">+ 添加分组</el-link>
          <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">
          </el-tree>
        </el-col>

        <el-col span="19">
          <el-table size="small" :data="listData" highlight-current-row v-loading="loading" element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="selection" width="60">
            </el-table-column>
            <el-table-column  prop="groupName" label="任务名称" width="200">
            </el-table-column>
            <el-table-column  prop="lordName" label="创建时间" width="150">
            </el-table-column>
            <el-table-column  prop="groupTag" label="扫码人数" width="200">
            </el-table-column>
            <el-table-column  prop="PeopleNum" label="拉群进度" width="120">
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="150">
              <template slot-scope="scope">
                <el-button size="mini" @click="currentHandler('detail', scope.row.id)">详情</el-button>
                <el-button size="mini" @click="">更多</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <div style="display: flex; justify-content: flex-end;">
            <div style="width: 450px; height: 60px;">
              <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>


    <!-- 添加分组 -->
    <el-dialog :title="title" :visible.sync="formVisible" width="30%" @click="close">
      <div style="background: rgb(230,247,255); border: 1px solid rgb(165,221,255); padding: 8px; color: #999; margin-bottom: 15px;">
        企业素材下的素材，默认全部员工可见，如果需要设置部分员工可见请至团队话术下设置
      </div>

      <el-row>
        <el-col span="4">
          分组名称：
        </el-col>
        <el-col span="20">
          <el-input size="small" v-model="addGroup" placeholder="请输入标签组名称"></el-input>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="4">
          可见范围：
        </el-col>
        <el-col span="20">
          全部员工
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close()">取消</el-button>
        <el-button size="mini" type="primary" @click="">确定</el-button>
      </div>
    </el-dialog>


    <!-- 新建素材 -->
    <el-dialog :title="wordsTitle" :visible.sync="wordsFormVisible" width="30%" @click="wordsClose()">
      <div style="background: rgb(230,247,255); border: 1px solid rgb(165,221,255); padding: 8px; color: #999; margin-bottom: 15px;">
        填写链接后将自动转换成内部网页链接，员工发送给客户后可记录客户打开的数据，及时提醒员工跟进
      </div>
      <el-form ref="form" :model="wordsForm" label-width="80px">
        <el-form-item label="分组">
          <el-select v-model="wordsForm.name" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="素材标题">
          <el-input v-model="wordsForm.name"></el-input>
        </el-form-item>

        <el-form-item label="文件类型">
          <el-radio-group v-model="wordsForm.name">
            <el-radio label="文本"></el-radio>
            <el-radio label="图片"></el-radio>
          </el-radio-group>
          <div><el-button size="mini" type="primary" @click="">点击上传</el-button></div>
          <div>文件名将被用做搜索，建议规范名称</div>
        </el-form-item>

        <el-form-item label="显示效果">
          <div style="width: 300px; height: 70px; background: #aaa;"></div>
        </el-form-item>
      </el-form>
      <div>
        <h6>连接追踪设置</h6>
        <el-checkbox v-model="checked">行为追踪(当客户点击素材链接时,发送素材链接的员工将会收到通知)</el-checkbox>
        <el-checkbox v-model="checked">动态记录(当客户点击素材链接时，会将客户的行为记录在客户动态里)</el-checkbox>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="wordsClose()">取消</el-button>
        <el-button size="mini" type="primary" @click="">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import ElementUI from 'element-ui'
// 全局禁止点击遮罩层关闭e-dialog弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false

export default {
  data() {
    return {
      // 选项卡
      activeName: 'first',

      title: '新建分组',
      wordsTitle: '新建素材',

      // 添加分组的数据
      addGroup: '',

      // 添加分组显示
      formVisible: false,
      // 新建素材显示
      wordsFormVisible: false,

      // 新建素材添加表单
      wordsForm: {
        name: ''
      },
      // 连接追踪选项
      checked: '',

      // 筛选
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      // 列表数据
      listData: [],
      // 显示加载
      loading: false,
    }
  },

  // 注册组件
  components: {
    Pagination
  },

  methods: {
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },

    // 添加分组显示
    show() {
      this.formVisible = true;
    },
    // 添加分组关闭
    close() {
      this.formVisible = false;
    },

    // 新建素材显示
    handleEdit() {
      this.wordsFormVisible = true;
    },
    // 新建素材显示
    wordsClose() {
      this.wordsFormVisible = false;
    }
  }
}
</script>

<style scoped>
.el-card {margin-top: 25px;}
.el-link {font-size: 18px; margin-bottom: 10px; font-weight: 700; color: #222;}
.el-dialog .el-row {margin-top: 20px;}
</style>
